<template>

	<picker style="width: 100%;" mode="multiSelector" @columnchange="bindMultiPickerColumnChange"
		@change="updateAddress" :value="multiIndex" :range="multiArray" @popupclosed="updateAddress">
		<view>
			{{formateAddress ? formateAddress:"选择地址" }}
		</view>
	</picker>
</template>
<script>
	export default {
		name: 'addressHorizontalSelect',
		components: {},
		props: {
			cityIndex: {
				type: Number,
				default () {
					return 0;
				}
			},
			areaIndex: {
				type: Number,
				default () {
					return 0;
				}
			},
			provinceIndex: {
				type: Number,
				default () {
					return 0;
				}
			},
			province: {
				type: String,
				default () {
					return "北京市";
				}
			},
			city: {
				type: String,
				default () {
					return "北京市";
				}
			},
			area: {
				type: String,
				default () {
					return "东城区";
				}
			},
		},
		data() {
			return {
				areas: null,
				provinces: null,
				citys: null,
				provinceName: this.province,
				cityName: this.city,
				areaName: this.area,
				cityIdx: this.cityIndex,
				areaIdx: this.areaIndex,
				provinceIdx: this.provinceIndex,
				areas: null,
				provinces: null,
				citys: null,
			}
		},

		computed: {
			multiArray() {
				if (this.provinces && this.citys && this.areas) {
					// return [this.provinces, this.citys[this.cityIdx], this.areas[this.areaIdx]];
					return [this.provinces, this.citys[this.provinceIdx], this.areas[this.provinceIdx][this.cityIdx]]
				}
				return null;
			},
			formateAddress() {
				return this.provinceName + this.cityName + this.areaName;
			},
			multiIndex() {
				return [this.provinceIdx, this.cityIdx, this.areaIdx];
			}
		},
		created() {
			let {
				areas,
				provinces,
				citys,
			} = JSON.parse(uni.getStorageSync('addressData'));
			this.$set(this, 'areas', areas);
			this.$set(this, 'provinces', provinces);
			this.$set(this, 'citys', citys);
		},
		methods: {

			updateAddress() {
				let
					province = this.provinceName,
					city = this.cityName,
					area = this.areaName,
					cityIdx = this.cityIdx,
					areaIdx = this.areaIdx,
					provinceIdx = this.provinceIdx;

				this.$emit('updateAddress', {
					province,
					city,
					area,
					cityIdx,
					areaIdx,
					provinceIdx
				})
			},
			bindMultiPickerColumnChange(e) {
				switch (e.detail.column) {
					case 0: //拖动第1列
						this.provinceName = this.multiArray[0][e.detail.value];
						this.provinceIdx = e.detail.value;
						this.cityIdx = 0;
						this.areaIdx = 0;
						this.cityName = this.multiArray[1][0];
						this.areaName = this.multiArray[2][0];
						break
					case 1: //拖动第2列

						this.cityIdx = e.detail.value;
						this.areaIdx = 0;
						this.cityName = this.multiArray[1][e.detail.value];
						this.areaName = this.multiArray[2][0];

						break
					case 2:

						this.areaIdx = e.detail.value;
						this.areaName = this.multiArray[2][e.detail.value];
						break;
				}
				this.$forceUpdate()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.date_picker {
		width: 100%;
		height: 50rpx;
	}
</style>
